import { PageHeaderWrapper } from '@ant-design/pro-layout';

import { deleteLicensesTree, getLicenseTreeByPage } from '@/services/sales/license';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Modal } from 'antd';
import React, { useRef, useState } from 'react';
import { useAccess, useLocation } from 'umi';
const LicenseTree: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const location = useLocation();
  console.log(location, '---ceshi1---');
  const [tableData2, setTableData2] = useState<any[]>([]);
  const access = useAccess();

  // 获取树形数据

  // useEffect(() => {
  //   getData2();
  // }, []);

  // 点击展开
  const areaExpandedRowsChange = async (expanded: boolean, record: any) => {
    console.log(expanded, record);
    console.log(tableData2, 'tableData2---');
    tableData2[2].city = '浙江';
    setTableData2(
      tableData2.map((item: any) => {
        item.city = '浙江';
        item.children = [];
        return item;
      }),
    );
    // 做一下限制,如果已经有数据,不再重复请求数据
    // if (expanded && record.children && isEmpty(record.children)) {
    //   if (record.level === 1) {
    //     // 获取第一级数据的children
    //     const res = await getCityList(record.province, 1);
    //     setTableData2(
    //       tableData2.map((item: any) => {
    //         if (item.id === record.id) {
    //           return {
    //             ...item,
    //             children: res,
    //           };
    //         }
    //         return item;
    //       }),
    //     );
    //   } else if (record.level === 2) {
    //     // 获取第二级数据的children
    //     const res = await getAreaList(record);
    //     setTableData2(
    //       tableData2.map((item: any) => {
    //         const obj = {
    //           ...item,
    //         };
    //         if (item.id === record.parentId) {
    //           item.children.forEach((ss: any) => {
    //             if (ss.id === record.id) {
    //               ss.children = res;
    //             }
    //           });
    //         }
    //         return obj;
    //       }),
    //     );
    //   }
    // }
  };
  /**
   * 穿梭框的数据设置
   */
  const columns: Any[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    {
      title: '唯一编号', //表头显示的名称
      search: false,
      dataIndex: 'identification', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 150,
    },
    {
      title: '授权号', //表头显示的名称
      search: false,
      dataIndex: 'licenseID', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 150,
    },

    {
      title: '授权号数量', //表头显示的名称
      search: false,
      dataIndex: 'num', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 110,
    },

    {
      title: '分销数量', //表头显示的名称
      search: false,
      dataIndex: 'tranNum', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 110,
    },
    {
      title: '已用数量', //表头显示的名称
      search: false,
      dataIndex: 'usedNum', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 150,
    },
    {
      title: '未使用数量', //表头显示的名称
      search: false,
      dataIndex: 'notUsedNum', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 150,
    },

    {
      title: '来源', //表头显示的名称
      search: false,
      dataIndex: 'from', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 150,
    },
    {
      title: '去向', //表头显示的名称
      search: false,
      dataIndex: 'to', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      width: 150,
    },
  ];

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable //表格Pro组件
        headerTitle="客户查询" //表头
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        // dataSource={tableData2}
        request={async (params = {}, sort, filter) => {
          const result = await getLicenseTreeByPage({ ...params, orderId: location.query.orderId });
          console.log(result);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
          // return  await new Promise({data:[{loginName:}], total:10, success: 0})
          // return {data:[], total:10, success: 0}
        }} //请求数据的地方，例子是用mock模拟数据，我是在后台请求的数据
        // expandable={{
        //   onExpand: areaExpandedRowsChange,
        // }}
        toolBarRender={(action, { selectedRows, selectedRowKeys }) => {
          if (access.canAdmin()) {
            return [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  Modal.confirm({
                    title: '删除License',
                    content: '确定删除License',
                    okText: '确认',
                    cancelText: '取消',
                    onOk: async () => {
                      await deleteLicensesTree({ ids: selectedRowKeys });
                      actionRef.current.reload();
                    },
                  });

                  // 1.清空form
                }}
                type="primary"
              >
                撤销分销
              </Button>,
            ];
          }
        }}
        columns={columns} //上面定义的
        rowSelection={{}}
        scroll={{ x: 2000, y: 350 }}
      />
    </PageHeaderWrapper>
  );
};

export default LicenseTree;
